<!--
 * @Author: Aaron Huang
 * @Date: 2021-12-25 17:38:20
 * @LastEditors: Aaron
 * @LastEditTime: 2022-05-31 13:44:40
 * @Description: file content
 * @company: 沃尔玛
-->
<template>
  <el-row v-if="commodityAttribute[keyName] && commodityAttribute[keyName].length" :gutter="gutter" style="width: 100%">
    <el-col v-for="(item, index) in commodityAttribute[keyName]" :key="index" :span="span" :xl="xl">
      <el-form-item
        :label="item.attrName"
        :prop="`${keyName}[${index}].attrValue`"
        :rules="{ required: item.requiredFlag, message: `${item.attrName}不能为空`, trigger: 'blur' }"
      >
        <el-input
          v-if="item.inputType == 3"
          v-model="commodityAttribute[keyName][index].attrValue"
          :placeholder="`请输入${item.attrName}`"
          :disabled="isDisabled"
        />
        <el-radio-group v-else-if="item.inputType == 4" v-model="commodityAttribute[keyName][index].attrValue" :disabled="isDisabled">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
        <el-date-picker
          v-else-if="item.inputType == 5 || item.inputType == 6"
          v-model="commodityAttribute[keyName][index].attrValue"
          :disabled="isDisabled"
          :value-format="item.inputType == 5 ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'"
          default-time="8:00:00"
          :type="item.inputType == 5 ? 'datetime' : 'date'"
          placeholder="选择日期"
        />
        <el-select
          v-if="item.inputType == 1 || item.inputType == 2"
          v-model="commodityAttribute[keyName][index].attrValue"
          clearable
          :multiple="item.inputType == 2"
          :placeholder="`请选择${item.attrName}`"
          :disabled="isDisabled"
        >
          <el-option v-for="op in item.attrValueList" :key="op.attrValueId" :label="op.attrValueName" :value="op.attrValueId" />
        </el-select>
        <el-popover v-if="transTemplate(item.attrKey)" placement="bottom" trigger="click">
          <i slot="reference" class="el-icon-question" />
          <component :is="transTemplate(item.attrKey)" />
        </el-popover>
      </el-form-item>
    </el-col>
  </el-row>
</template>

<script>
import jdtohome from '../schedule/components/fieldPrompt/jdtohome.vue'
import tradeName from '../schedule/components/fieldPrompt/tradeName.vue'
import jdvip1 from '../schedule/components/fieldPrompt/jdvip1.vue'
import jdvip2 from '../schedule/components/fieldPrompt/jdvip2.vue'
import jdvip3 from '../schedule/components/fieldPrompt/jdvip3.vue'

export default {
  name: 'ChannelAttribute',
  components: { jdtohome, tradeName, jdvip1, jdvip2, jdvip3 },
  props: {
    commodityAttribute: {
      type: Object,
      default: () => {
        return {}
      }
    },
    keyName: {
      type: String,
      default: ''
    },
    isDisabled: {
      type: Boolean,
      default: true
    },
    span: {
      type: Number,
      default: 12
    },
    xl: {
      type: Number,
      default: 8
    },
    gutter: {
      type: Number,
      default: 0
    }
  },
  methods: {
    transTemplate(value) {
      if (this.commodityAttribute.channelCode === '07' && value === 'SKU_NAME_JDDJ') return 'jdtohome'
      else if (
        (this.commodityAttribute.channelCode === '12' && value === 'SKU_NAME_WM') ||
        (this.commodityAttribute.channelCode === '06' && value === 'SKU_NAME_WFS')
      ) {
        return 'tradeName'
      } else if (this.commodityAttribute.channelCode === '06' && value === 'IS_CAN_BE_RTN') return 'jdvip1' // 无理由退换货
      else if (this.commodityAttribute.channelCode === '06' && value === 'PACK_TYPE') return 'jdvip2' // 商品包装
      else if (this.commodityAttribute.channelCode === '06' && value === 'WARE_BIG_SMALL_MODE') return 'jdvip3'// 商品件型
    }
  }
}
</script>

<style lang="scss" scoped>
i {
  vertical-align: middle;
  cursor: pointer;
  font-size: 16px;
  margin-left: 10px;
}
</style>
